<template>
    <div class="shareMaxBoxClass justify-center align-center">
        <div class="shareCoreBoxClass justify-center align-center">
            <div @click="sharePageHandle('qq')" class="shareItemBoxClass hover justify-center align-center">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-QQ"></use></svg>
            </div>
            <div @click="sharePageHandle('qzone')" class="shareItemBoxClass hover justify-center align-center">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-QQkongjian"></use></svg>
            </div>
            <div @click="sharePageHandle('weibo')" class="shareItemBoxClass hover justify-center align-center">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_xinlang-chunselogo"></use></svg>
            </div>
            <div v-if="$store.state.userinfos&&$store.state.userinfos.avator" @click="zanHandler" :class="`shareItemBoxClass ${detail.iszans&&detail.iszans.zan_user==userinfos.id?'':'grays'} hover justify-center align-center`">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zantianchong"></use></svg>
            </div>
            <div v-if="$store.state.userinfos&&$store.state.userinfos.avator" @click="collectHandler" :class="`shareItemBoxClass ${detail.iscollects&&detail.iscollects.collect_user==userinfos.id?'':'grays'} hover justify-center align-center`">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-huozan"></use></svg>
                <!-- <svg class="icon" aria-hidden="true"><use xlink:href="#icon-yishoucang"></use></svg> -->
            </div>
        </div>
    </div>
</template>
<script>
import {isMobile,extendsParams,extendsEncrypte} from '~/assets/inc/common.js';
import {apis} from '~/assets/inc/apis.js';
export default {
    props:{
        detail:{
            type:Object,
            default:{},
        }
    },
    data(){
        return{
            showAmountStatus:true,
            amount:[
                {
                    amount:1,
                    ischecked:true,
                },
                {
                    amount:5,
                    ischecked:false,
                },
                {
                    amount:10,
                    ischecked:false,
                },
                {
                    amount:15,
                    ischecked:false,
                },
                {
                    amount:20,
                    ischecked:false,
                },
                {
                    amount:30,
                    ischecked:false,
                },
            ],
            customAmount:1,
            userinfos:{},
        }
    },
    mounted(){
        if(localStorage.getItem('userinfo')){
            this.userinfos = JSON.parse(localStorage.getItem('userinfo'))
        }
    },
    methods:{
        //获取文章详情
        async getArticleHandler(){
            
        },
        //收藏
        async collectHandler(){
            this.$store.commit('setLoading',true);
            extendsEncrypte({ article_id:this.detail.id },this.$axios);
            let res = await this.$axios.post(apis.collectsAPI,extendsParams({ article_id:this.detail.id }));
            this.$vs.notification({
                progress: 'auto',
                color:res.data.success?'success':'danger',
                position:'bottom-center',
                title: 'Dias Softsoft Inc.',
                text: res.data.success?res.data.message.message:res.data.message
            })
            if(res.data.success){
                this.$emit('oncollectszanschange',res.data.message.data);
            }else if(res.data.code==1001){
                this.$router.replace({path:'/login'})
            }
            this.$store.commit('setLoading',false);
        },
        //点赞
        async zanHandler(){
            this.$store.commit('setLoading',true);
            extendsEncrypte({ article_id:this.detail.id },this.$axios);
            let res = await this.$axios.post(apis.zansAPI,extendsParams({ article_id:this.detail.id }));
            this.$vs.notification({
                progress: 'auto',
                color:res.data.success?'success':'danger',
                position:'bottom-center',
                title: 'Dias Softsoft Inc.',
                text: res.data.success?res.data.message.message:res.data.message
            })
            if(res.data.success){
                this.$emit('oncollectszanschange',res.data.message.data);
            }else if(res.data.code==1001){
                this.$router.replace({path:'/login'})
            }
            this.$store.commit('setLoading',false);
        },
        //分享方法
        sharePageHandle(_type){
            let _summary = '';
            let _site = 'https://www.dsnbc.com'
            let _url = encodeURIComponent(window.location.href);
            switch (_type) {
                case 'qzone':
                    window.open(`http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${_url}&title=${this.detail.dynamic_title}&desc=${this.detail.dynamic_description}&summary=${_summary}&site=${_site}&pics=${this.detail.dynamic_icon}`,'_blank');
                    break;
                case 'qq':
                    window.open(`http://connect.qq.com/widget/shareqq/index.html?url=${_url}&title=${this.detail.dynamic_title}&source=${_site}&desc=${this.detail.dynamic_description}&pics=${this.detail.dynamic_icon}&summary=${_summary}`,'_blank');
                    break;
                case 'weibo':
                    window.open(`https://service.weibo.com/share/share.php?url=${_url}&title=${this.detail.dynamic_title}&pic=${this.detail.dynamic_icon}&appkey=${_summary}`,'_blank');
                    break;
                default:
                    break;
            }
        },
    },
}
</script>
<style lang="scss" scoped>
    .shareMaxBoxClass{
        width:100%;
        display: flex;
        .shareCoreBoxClass{
            width:1200px;
            padding:20px 0;
            display: flex;
            .shareItemBoxClass{
                margin:0 7px;
                width:40px;
                height:40px;
                display: flex;
                background:#ffffff;
                border-radius: 12px;
                transition: .5s all ease;
                font-size: 18px;
                color:orangered;
                svg{
                    width:25px;
                    height:25px;
                }
                &:hover{
                    cursor: pointer;
                    color:rgb(255, 255, 255) !important;
                    font-weight: bold;
                    background-image: linear-gradient(-30deg, MediumSlateBlue 0%, rgb(192, 181, 255) 100%);
                    box-shadow: rgba(124, 104, 238, 0.5) 0px 5px 8px 1px;
                }
            }
            .grays{
                filter: grayscale(0.9);
                &:hover{
                    background:var(--white) !important;
                }
            }
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .shareMaxBoxClass{
            width:100%;
            display: flex;
            .shareCoreBoxClass{
                width:100%;
                padding:2rem 0;
                display: flex;
                .shareItemBoxClass{
                    margin:0 0.7rem;
                    width:3rem;
                    height:3rem;
                    display: flex;
                    background:#ffffff;
                    border-radius: 1.2rem;
                    transition: .5s all ease;
                    font-size: 1.8rem;
                    color:orangered !important;
                    svg{
                        width:2.5rem;
                        height: 2.5rem;
                    }
                    &:hover{
                        cursor: pointer;
                        font-weight: bold;
                        background-image: linear-gradient(-30deg, MediumSlateBlue 0%, rgb(192, 181, 255) 100%);
                        box-shadow: rgba(124, 104, 238, 0.5) 0px 5px 8px 1px;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
.customAmountBoxClass{
    .vs-input{
        width:100%;
        font-size: 14px !important;
        font-weight: bold;
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .vs-input{
            width:100%;
            font-size: 1.4rem !important;
            font-weight: bold;
        }
    }
}
</style>